<template>
  <div class="smart-route">
    <Form ref="form"></Form>
    <Add ref="add"></Add>
    <a-divider orientation="left">路由配置</a-divider>
    <a-table class="factor-table" :data-source="factorData" :pagination="false">
      <a-table-column title="因素">
        <template slot-scope="record">
          {{ record.name }}
        </template>
      </a-table-column>
      <a-table-column title="权重">
        <template slot-scope="record">
          <a-tag> {{ record.weight }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column title="计算规则">
        <template slot-scope="record">
          <a-tag v-for="item in record.rule" :key="item"> {{ item }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column title="操作" :width="100">
        <template slot-scope="record">
          <span class="edit-link" @click="toExtra(2, record)">编辑</span>
        </template>
      </a-table-column>
    </a-table>
    <div class="add-factor-row">
      <a class="add-factor" @click="toExtra(1)">+添加因素</a>
    </div>
    <br />
    <a-divider orientation="left">路由推荐</a-divider>
    <a-table class="factor-table" :data-source="recommendData" :pagination="false">
      <a-table-column title="综合评分">
        <template slot-scope="record">
          <a-tag> {{ record.score }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column title="推荐概率">
        <template slot-scope="record">
          <a-tag> {{ record.rate }}</a-tag>
        </template>
      </a-table-column>
      <a-table-column title="操作" :width="100">
        <template slot-scope="record">
          <span class="edit-link" @click="toExtra(2, record)">编辑</span>
        </template>
      </a-table-column>
    </a-table>
    <div class="add-factor-row">
      <a class="add-factor" @click="toExtra(1)">+添加因素</a>
    </div>

    <div class="footer-btns">
      <a-button class="mr10">关闭</a-button>
      <a-button class="mr10" type="primary">确认</a-button>
    </div>
  </div>
</template>

<script>
import Add from './Add.vue'
import Form from './Form.vue'
export default {
  components: {
    Add,
    Form
  },
  data () {
    return {
      factorData: [
        {
          name: '利率',
          weight: '40%',
          rule: ['1-1.2  100分', '1.2-1.4  80分']
        },
        {
          name: '金融机构等级',
          weight: '20%',
          rule: ['A级  100分', 'B级  80分', 'C级  60分']
        },
        {
          name: '放款速度',
          weight: '10%',
          rule: []
        },
        {
          name: '信息费',
          weight: '30%',
          rule: []
        }
      ],
      recommendData: [
        { score: '80-100', rate: '80%' },
        { score: '60-80', rate: '60%' },
        { score: '0-60', rate: '40&' }
      ]
    }
  },
  methods: {
    toExtra (key, row) {
      if (key === 1) {
        this.$refs.add.open()
      } else {
        this.$refs.form.open(row)
      }
    }
  }
}
</script>

<style scoped>
.smart-route {
  padding: 24px;
}
.add-factor-row {
  margin-top: 8px;
}
.add-factor {
  color: #1890ff;
  cursor: pointer;
}
.edit-link {
  color: #1890ff;
  cursor: pointer;
}
.footer-btns {
  text-align: center;
  margin-top: 24px;
}
</style>
